<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <title>本地存储</title>
    <script src="js/jquery.min.js"></script>
</head>
<body>
    <h4>本地存储</h4>
    <p class="name">姓名：<span></span></p>
    <div class="content"></div>
    <button class="delSigle">删除单个值</button>
    <button class="clearAll">全部删除</button>
</body>
<script>
    $(function(){
        // console.log(TouchEvent);
        console.log(sessionStorage);
        // 设置(存储)值(键值对)
        sessionStorage.setItem('name','Obama');

        // sessionStorage.getItem('name');
        $('.name span').text(sessionStorage.getItem('name'));


        // 存储一个对象
        var stu = {
            class:'w003',
            nums: 19,
            homeland:'四川'
        };
        // JSON.stringify() 转换成字符串
        console.log(typeof stu) // object
        console.log(stu) // object
        console.log(typeof JSON.stringify(stu)) // 字符串
        console.log(JSON.stringify(stu)) // 字符串
        
        sessionStorage.setItem('stu2',stu);
        sessionStorage.setItem('stu',JSON.stringify(stu));
        // 获取值(传名字)
        var myStu = sessionStorage.getItem('stu');

        // json.parse 解析成json对象
        var stuObj = JSON.parse(myStu);
        console.log(JSON.parse(myStu));
        for(var k in stuObj){
            console.log('key:'+k+',value:'+stuObj[k]);
            var p = $('<p>属性名:'+k+', 属性值:'+stuObj[k]+'</p>');
            $('.content').append(p)
        }

        $('.delSigle').click(function(){
            // 删除，传参传的是键
            sessionStorage.removeItem('stu')
        })

        $('.clearAll').click(function(){
            sessionStorage.clear();
        })
    })

    // $('.content').text(myStu);

    // console.log(localStorage);
</script>
</html>